<template>
  <div class="container">
    <div class="box">
      <header class="header">
        <Back/>
        会员卡
      </header>
      <div class="content vip-content">
        <div class="vip-box">
          <div class="vip-logo">
            <img src="http://cdn.jisuapp.cn/static/webapp/images/franchisee/vip-banner.jpg" alt="">
          </div>
        </div>
        <div class="no-vip" v-if="flag">
          <span class="iconfont icon-huiyuanqia"></span>
          <h1>您还不是会员哦</h1>
          <p>
            点击去
            <router-link to="/wallet">充值</router-link>
            成为会员<a @click="bian()">----你想开挂吗</a>
          </p>
        </div>
        <div class="vip-message" v-else>
          <div class="card">
            <div class="card-top">
              <div class="card-top-left">
                <img :src="this.vipimg" alt="图片加载失败">
              </div>
              <div class="card-top-right">
                <ul>
                  <li>
                    <span>用户：</span>
                    <span>{{ username }}</span>
                  </li>
                  <li>
                    <span>会员等级：</span>
                    <span>黄金会员</span>
                  </li>
                  <li>
                    <span>尊享：</span>
                    <span>全场9.5折</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card-bottom">
              <span>有效日期：永久有效</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Back from '@/components/Back.vue'
export default {
  components: {
    Back
  },
  data () {
    return {
      vipimg: '',
      username: '',
      flag: true
    }
  },
  created () {
    axios.get('/users/select?userid=' + localStorage.getItem('userid')).then(res => {
      this.vipimg = res.data.userimg
      this.username = res.data.username
      if (res.data.vip === '1') {
        this.flag = false
      }
    })
  },
  methods: {
    bian (flag) {
      this.flag = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .vip-content {
    display: flex;
    flex-direction: column;
    .vip-box {
      width: 100%;
      height: auto;
      .vip-logo {
        width: 100%;
        height: 1.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .no-vip {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      span {
        font-size: 1.3rem;
      }
      h1 {
        font-size: 0.3rem;
      }
      p {
        font-size: 0.15rem;
      }
    }
    .vip-message {
      width: 100%;
      height: 1.3rem;
      .card {
        width: 100%;
        height: 100%;
        .card-top {
          width: 100%;
          height: 1rem;
          display: flex;
          background-color:rgb(149, 149, 149);
          .card-top-left {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              display: block;
              width: 0.7rem;
              height: 0.7rem;
              border: 1px solid black;
              border-radius: 50%;
            }
          }
          .card-top-right {
            flex: 7;
            ul {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-around;
              padding-left: 0.1rem;
              li {
                display: flex;
                span {
                  color: #fff;
                }
              }
            }
          }
        }
        .card-bottom {
          width: 100%;
          height: 0.3rem;
          background-color: gray;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 0.1rem;
          span {
            color: #fee;
          }
        }
      }
    }
  }
</style>
